<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function changeImg(){
            //获取单选按钮的DOM对象
            var mi=document.getElementById("mi");
            var fei=document.getElementById("fei");
            var baby=document.getElementById("baby");

            //获取图片的DOM对象
            var logo=document.querySelector("img");

            // console.log(mi.checked,fei.checked,baby.checked);
            if(mi.checked){//杨幂被选中
                logo.src="images/mi.png";
            }else if(fei.checked){//刘亦菲被选中
                logo.src="images/fei.png";
            }else{//杨颖被选中
                logo.src="images/baby.png";
            }
        }
    </script>
</head>
<body>
    <div>请选择您喜欢的女明星:</div>
    <div>
        <input type="radio" name="idol" id="mi" checked onclick="changeImg()"><label for="mi">杨幂</label>
        <input type="radio" name="idol" id="fei" onclick="changeImg()"><label for="fei">刘亦菲</label>
        <input type="radio" name="idol" id="baby" onclick="changeImg()"><label for="baby">杨颖</label>
    </div>
    <div>
        <img src="images/mi.png" alt="">
    </div>
</body>
</html>